<script setup>
import router from "../router/index.js";
import { ref, reactive } from "vue";
import { RouterView } from "vue-router";
import request from "../utils/request.js";
import { useUserStore } from "../stores/user.js";
import { ElMessage } from "element-plus";

// 存储个人平论数据
const oneself = reactive({
  comments: [],
});
const userId = ref();
userId.value = useUserStore().getUser.id;
// 根据userId像后端发送请求
const showOneselfComments = () => {
  request.get("/comment/selectCommentByUserId/" + userId.value).then((res) => {
    if (res.code === "200") {
      oneself.comments = res.data;
      console.log(oneself.comments);
    }
  });
};

showOneselfComments();

const deleteComment = (id) =>{
    request.get("/comment/deleteCommentById/" + id).then((res)=>{
        if(res.code === "200"){
            showOneselfComments()
            ElMessage.success(res.msg)
        }
    })
}

const goback = () => {
  router.go(-1);
};
</script>

<template>
  <div class="comment">
    <!-- 标题 -->
    <div class="title">
      <div style="font-size: 20px; font-weight: bold">自己的评论</div>
      <div>
        <el-button type="info" @click="goback()">返回</el-button>
      </div>
    </div>
    <!-- 数据表 -->
    <div class="commentlist">
      <el-table :data="oneself.comments" height="550" style="width: 100%">
        <el-table-column label="书籍图片" width="200">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img
                :src="scope.row.photo"
                alt=""
                style="width: 100px; height: 100px"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="书名" width="150" />
        <el-table-column prop="content" label="评论内容" />
        <!-- 时间格式存在问题 -->
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column label="操作" width="100">
            <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-button type="danger" @click="deleteComment(scope.row.id)">删除</el-button>
            </div>
          </template>
            
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.comment {
  min-width: 1000px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: aliceblue;
  padding: 20px;
}
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
